<template>
  <div class="home">
    <el-container
      ><el-header><Header @headerPath="changeMain"></Header></el-header>

      <Zheader
        v-if="1 == Hshow"
        class="zheader"
        @Partkey="changeZhyq"
      ></Zheader>
      <Sheader v-else-if="0 == Hshow" class="sheader"></Sheader>

      <el-main class="main">
        <FGAF v-if="Hshow == 2"></FGAF>
        <GYSJ v-else-if="0 == Hshow"></GYSJ>
        <CYSJ v-else-if="3 == Hshow"></CYSJ>
        <div v-else-if="1 == Hshow">
          <ZHYQM v-if="0 == Zshow"></ZHYQM><ZHYQC v-else-if="1 == Zshow"></ZHYQC
          ><ZHYQR v-else-if="2 == Zshow"></ZHYQR
          ><ZHYQS v-else-if="3 == Zshow"></ZHYQS>
        </div> </el-main
    ></el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/Header.vue";
import Zheader from "@/components/zhyq/Z_header.vue";
import Sheader from "@/components/gysj/S_header.vue";
import GYSJ from "@/page/gysj.vue";
import ZHYQM from "@/page/zhyq-main.vue";
import ZHYQC from "@/page/zhyq-che.vue";
import ZHYQR from "@/page/zhyq-ren.vue";
import ZHYQS from "@/page/zhyq-she.vue";
import FGAF from "@/page/5Gaf.vue";
import CYSJ from "@/page/cysj.vue";

export default {
  name: "Home",
  components: {
    Header,
    Zheader,
    Sheader,
    ZHYQM,
    GYSJ,
    ZHYQC,
    ZHYQR,
    ZHYQS,
    FGAF,
    CYSJ,
  },
  watch: {
    LineDate: {
      handler(newVal, oldVal) {
        this.drawLine();
      },
      deep: true,
    },
  },
  data() {
    return {
      Hshow: 0,
      Zshow: 0,
      isShow: false,
      Pindex: 0,
      date: "",
      time1: undefined,
      time2: "按日期",
      SpaceHeight: "20px",
    };
  },

  mounted() {
    // 声明一个变量指向Vue实例this，保证作用域一致
    this.date = this.getData(new Date());
    this.time1 = this.getData(new Date());
    this.timer = setInterval(() => {
      this.date = this.getData(new Date()); // 修改数据date
    }, 6000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    changeZhyq(e) {
      console.log(e);
      if (e == "总览") {
        this.Zshow = 0;
      } else if (e == "车辆管理") {
        this.Zshow = 1;
      } else if (e == "人员管理") {
        this.Zshow = 2;
      } else if (e == "设备管理") {
        this.Zshow = 3;
      } else if (e == "能源管理") {
        this.Zshow = 4;
      }
    },
    changeMain(e) {
      console.log(e);
      if (e == "工业视觉") {
        this.Hshow = 0;
      } else if (e == "智慧园区") {
        this.Hshow = 1;
      } else if (e == "5G安防") {
        this.Hshow = 2;
      } else if (e == "产业数据") {
        this.Hshow = 3;
      }
    },
    onChange(value, dateString) {
      this.time1 = dateString;
    },
    onClick(e) {
      this.time2 = e.key;
      if (e.key == "按日期") {
        this.Line = true;
        this.getLine1Data();
      } else {
        this.Line = false;
        this.getLine2Data();
      }
    },
    getData(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      return year + "-" + month + "-" + date;
    },
    enter() {
      if (this.Hshow < 2) {
        this.isShow = true;
        this.SpaceHeight = "30px";
      }
    },
    leave() {
      if (this.Hshow < 2) {
        this.isShow = false;
        this.SpaceHeight = "20px";
      }
    },
  },
};
</script>

<style >
.home {
  background-image: url(../assets/image/背景.png);
  width: 1920px;
  height: 1080px;
  background-size: 1920px 1040px;
}
.main {
  min-height: 100%;
  padding: 0 0 0 20px !important;
}
.title {
  color: #1af7ff;
  text-align: left;
  font-size: 16px;
  padding-left: 10px;
  background-image: url(../assets/image/当前检测-标题-背景图片.png);
  background-repeat: no-repeat;
  background-size: 171px 30px;
  line-height: 30px;
  height: 30px;
  font-weight: bold;
}
.comp {
  margin: 20px 0;
  border: 1px solid #3c6fd2;
}
.gaiyao {
  margin-top: 40px;
  margin-left: 10px;
  width: 120px;
}
.gyfont {
  float: left;
  color: #ffffff;
  font-size: 12px;
  margin-left: 10px;
}

.ant-calendar {
  background-color: #142766 !important;
  border: 1px solid #3c6fd2 !important;
  color: #ffffff !important;
  font-size: 8px;
  width: 200px !important;
  height: 340px !important;
}
.ant-calendar-input {
  background-color: #142766 !important;
  color: #ffffff !important;
  font-size: 8px;
}
.ant-calendar-date {
  color: #ffffff !important;
  font-size: 8px;
  width: 20px !important;
  height: 20px !important;
}
.ant-calendar-header .ant-calendar-year-select,
.ant-calendar-header .ant-calendar-month-select {
  color: #ffffff !important;
  font-size: 8px;
}
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
  color: #ffffff !important;
  font-size: 12px;
  text-align: center;
}
.ant-dropdown-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

/* 告警统计样式 */
.riqiDropdown {
  float: right;
  margin-top: 10px;
  margin-right: 20px;
  color: #fff;
  border: 1px solid #ffffff;
  padding: 0px 5px;
}
.riqiDropdown:hover {
  color: #1af7ff;
}
.riqiDropdown:active {
  color: #40a9ff;
}
.riqiDropdown-a {
  font-size: 10px;
  line-height: 20px;
  font-weight: normal;
}
.riqiDropdown-item {
  background-color: #142766 !important;
  border: 1px solid #3c6fd2 !important;
  border-radius: 0px !important;
}
/* 隐藏导航栏相关样式 */
.sheaderquyu {
  height: 24px;
  position: relative;
  bottom: 0px;
}
.jiancequyu {
  position: relative;
  bottom: -18px;
  height: 20px;
}
.sheader {
  margin-top: 15px;
  margin-bottom: -18px;
  height: 40px;
}
.zheader {
  margin-top: 15px;
  margin-bottom: -18px;
  height: 60px;
}
/* 异常检测 更多按钮样式 */
.more-button {
  float: right !important;
  font-size: 12px !important;
  color: #ffffff !important;
  margin-right: 10px !important;
  margin-top: -5px !important;
}
.more-button:hover {
  color: #1af7ff !important;
}
.more-button:active {
  color: #40a9ff !important;
}
.more-icon {
  color: #ffffff;
  float: right;
  font-size: 15px;
  margin-left: 5px;
  margin-top: -2px;
}

/* 检测记录 时间选择器样式 */
.date-picker {
  float: right !important;
  margin-top: 10px !important;
  margin-right: 10px !important;
}
.date-picker span {
  width: 78px;
  height: 20px;
  color: #ffffff;
  padding: 2px 10px;
  font-size: 12px;
  border: 1px solid #ffffff;
  font-weight: normal;
}
.date-picker-icon {
  margin-right: 5px;
  color: #fff;
  font-size: 14px;
}
.center {
  display: flex;
  height: 160px;
  margin: 20px 0;
}

/* 概要统计相关样式 */
.gaiyao-wai {
  width: 410px;
  margin-right: 20px;
  border: 1px solid #3c6fd2;
}
.gaiyao-fenbu {
  display: flex;
  justify-content: space-around;
}

/* 安全评价相关样式 */
.anquan {
  z-index: 999;
  float: right;
  position: absolute;
  width: 171px;
}
.anquandengji {
  font-size: 26px;
  color: #ffffff;
  margin: 20px 0;
}
.anquandengji span {
  color: #ff6635;
}
.anquanjianyi {
  font-size: 16px;
  color: #ffffff;
  margin-top: 20px;
}
.rader {
  width: 100%;
  height: 100%;
  z-index: 98;
  position: absolute;
}
</style>

<style lang="less" scoped>
/deep/ .el-main {
  overflow: hidden;
}
</style>
